<!--
 * @Author: your name
 * @Date: 2021-03-30 11:03:48
 * @LastEditTime: 2021-04-01 08:32:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-template-master\src\components\cartgroy\index.vue
-->
<template>
  <div>
    <el-form :inline="true"
             :model="cForm"
             :disabled='!isShow'>
      <el-form-item label="一级列表">
        <el-select placeholder="请选择"
                   value=''
                   v-model="cForm.cartgroy1Id"
                   @change="halderCartgroy1">
          <el-option :label="c1.name"
                     :value="c1.id"
                     v-for="c1 in cartgroy1List"
                     :key="c1.id"></el-option>

        </el-select>
      </el-form-item>

      <el-form-item label="二级列表">
        <el-select placeholder="请选择"
                   value=''
                   v-model="cForm.cartgroy2Id"
                   @change="halderCartgroy2">
          <el-option :label="c2.name"
                     :value="c2.id"
                     v-for="c2 in cartgroy2List"
                     :key="c2.id"></el-option>

        </el-select>
      </el-form-item>

      <el-form-item label="三级列表">
        <el-select placeholder="请选择"
                   value=''
                   v-model="cForm.cartgroy3Id"
                   @change="halderCartgroy3">
          <el-option :label="c3.name"
                     :value="c3.id"
                     v-for="c3 in cartgroy3List"
                     :key="c3.id"></el-option>

        </el-select>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CartgroyList',
  props: ['isShow'],
  data () {
    return {
      cartgroy1List: [],
      cartgroy2List: [],
      cartgroy3List: [],
      cForm: {
        cartgroy1Id: '',
        cartgroy2Id: '',
        cartgroy3Id: '',
      }
    }
  },
  mounted () {
    this.getGroyList()
  },
  methods: {
    async getGroyList () {
      const result = await this.$API.cartgroy.getCategory1()
      if (result.code === 200 || result.code === 20000) {
        this.cartgroy1List = result.data
      }
    },

    async halderCartgroy1 (cartgroy1Id) {
      this.cartgroy2List = []
      this.cartgroy3List = []
      this.cForm.cartgroy2Id = ''
      this.cForm.cartgroy3Id = ''
      this.$emit('halderCartList', { cartgroyId: cartgroy1Id, level: 1 })
      const result = await this.$API.cartgroy.getCategory2(cartgroy1Id)
      if (result.code === 200 || result.code === 20000) {
        this.cartgroy2List = result.data
      }
    },

    async halderCartgroy2 (cartgroy2Id) {
      this.cartgroy3List = []
      this.cForm.cartgroy3Id = ''
      this.$emit('halderCartList', { cartgroyId: cartgroy2Id, level: 2 })
      const result = await this.$API.cartgroy.getCategory3(cartgroy2Id)
      if (result.code === 200 || result.code === 20000) {
        this.cartgroy3List = result.data
      }
    },
    halderCartgroy3 (cartgroy3Id) {
      this.$emit('halderCartList', { cartgroyId: cartgroy3Id, level: 3 })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
